<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mac</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3241864_y5olqh57uek.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/footer.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        .image {
            position: relative;
            overflow: hidden;
        }
        
        .imac img {
            display: block;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(calc(-50% - 30px), 0);
        }
        
        .imac h2 {
            width: 290px;
            font-size: 72px;
            color: #1d1d1d;
            position: relative;
            left: 50%;
            position: sticky;
            font-family: Helvetica;
            margin: 100px 0 0;
            padding: 0;
            letter-spacing: -.012em;
            top: -1px;
            font-weight: normal;
            transform: scale(clamp(0.15, var(--scale), 1));
            transform-origin: 0% 0%;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav id="global-nav">
        <ul class="header">
            <li class="nav-item">
                <a href="../index.html" class="nav-link iconfont icon-apple-fill"> </a>
            </li>
            <li class="nav-item"><a href="./store.html" class="nav-link">Store</a></li>
            <li class="nav-item"><a href="./pages/mac.html" class="nav-link">Mac</a></li>
            <li class="nav-item"><a href="./ipad.html" class="nav-link">iPad</a></li>
            <li class="nav-item"><a href="./iphonese.html" class="nav-link">iPhone</a></li>
            <li class="nav-item"><a href="./iphone13.html" class="nav-link">Watch</a></li>
            <li class="nav-item"><a href="#" class="nav-link">AirPods</a></li>
            <li class="nav-item"><a href="./homepod.html" class="nav-link">TV & Home</a></li>
            <li class="nav-item"><a href="./niublity.html" class="nav-link">Only on Apple </a></li>
            <li class="nav-item"><a href="#" class="nav-link">Accessories</a></li>
            <li class="nav-item"><a href="./pages/niublity.html" class="nav-link">Support</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-search "> </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-bag "> </a>
            </li>
        </ul>
    </nav>
    <!-- 主体 -->
    <div class="imac">
        <h2 style="--scale: 1">Only 11.5mm. Now that's thin.</h2>
        <div class="image">
            <img src="https://www.apple.com/105/media/us/imac-24/2021/5e004d75-3ad6-4bb9-ab59-41f891fc52f0/anim/design-hero/large/flow/flow_startframe.jpg" alt="">
        </div>
    </div>

    <!-- 页脚 -->
    <footer id="global-footer">
        <div class="footer-content">
            <div class="breadcrumbs">
                <a href="#" class="iconfont icon-apple-fill"></a>
                <ul class="paths">
                    <li class="path-item iconfont">
                        <span> Apple Store Online</span>
                    </li>
                    <li class="path-item iconfont">
                        <span> Apple Arcade</span>
                    </li>
                </ul>
            </div>

            <nav class="footer-list">
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>

            </nav>

            <div class="footer-info">
                <div class="shop"> More ways to shop: <a class="blue-link" href="#">Find an Apple Store</a> or <a class="blue-link" href="#">other retailer</a> near you. Or call 1‑800‑MY‑APPLE.</div>
                <div class="legal">
                    <div class="copyright">
                        Copyright © 2022 Apple Inc. All rights reserved.
                    </div>
                    <div class="links">
                        <a href="">Privacy Policy</a>
                        <a href="">Terms of Use</a>
                        <a href=""> Sales and Refunds</a>
                        <a href="">Legal</a>
                        <a href="">Site Map</a>
                    </div>
                    <div class="locale">United State</div>
                </div>
            </div>
        </div>
    </footer>
    <script>
        let isPinned = false
        const h2 = document.querySelector('h2')
        const observer = new IntersectionObserver(([e]) => {
            isPinned = (e.intersectionRatio < 1)
            e.target.classList.toggle('pinned', isPinned)
        }, {
            threshold: [1]
        })
        observer.observe(h2)
            // 监听滚动事件
        document.addEventListener('scroll', (e) => {
            if (isPinned) {
                let html = document.documentElement
                    // 获取h2的高+margin-bottom
                let height = parseInt(getComputedStyle(h2).getPropertyValue('height')) + parseInt(getComputedStyle(h2).getPropertyValue('margin-bottom'))
                let marginTop = parseInt(getComputedStyle(h2).getPropertyValue('margin-top'))
                    //已滚动的比例
                let scrolled = parseFloat((html.scrollTop - marginTop) / height)
                h2.style.setProperty('--scale', (1 - scrolled))
            }
        })
    </script>
</body>

</html>